<template>
  <a-select v-model="currentValue" @change="changeHandler">
    <a-select-option
      v-for="item in accountList"
      :key="item.name"
      :value="item.name"
    >
      {{ item.name }}
    </a-select-option>
  </a-select>
</template>

<script>
export default {
  data() {
    return {
      currentValue: this.value,
      accountList: [
        { id: 1, name: "cloud" },
        { id: 2, name: "trade" },
      ],
    };
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  mounted() {},
  methods: {
    changeHandler(val) {
      const index = this.accountList.findIndex((item) => item.name === val);
      console.log(index)
      this.$emit('input', val)
      this.$emit('change', {index, option: this.accountList})
    }
  },
};
</script>

<style lang="scss" scoped></style>
